<template>
    <div>

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="formInline.userName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="登录名">
          <el-input v-model="formInline.loginName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formInline.tel" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>

        </el-form-item>
      </el-form>


      <el-button type="primary" @click="addOpen" size="mini">增加</el-button>
      <el-button  type="primary" @click="toExcel"  size="mini">导出EXCEL</el-button>


      <el-table
        :data="userList"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="用户ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="rolename"
          label="角色"
          width="180">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名称"

          width="180">
          <template slot-scope="scope">
            <el-popover>
              <p> <img :src="scope.row.img" width="50px" height="50px"></p>
              <p>用户名: {{ scope.row.userName }}</p>
              <p>登录名: {{ scope.row.loginName }}</p>
              <p>联系电话: {{ scope.row.tel }}</p>
              <p>活动状态:
                <el-tag type="danger" v-if="scope.row.version==0" >冻结</el-tag>
                <el-tag type="success"  v-if="scope.row.version==1" >激活</el-tag>
              </p>
              <p>拥有角色: {{ scope.row.rolename }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.userName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="loginName"
          label="登录名"
          width="180">
        </el-table-column>
        <el-table-column label="头像">
          <template v-slot="scope">
            <img :src="scope.row.img" width="60px" height="60px">
          </template>
        </el-table-column>
        <el-table-column
          prop="tel"
          label="电话"
        width="180">
        </el-table-column>
        <el-table-column
          prop="version"
          label="活动状态"
        width="180">
         <template v-slot="scope">
             <el-button v-if="scope.row.version==0" type="success" plain @click="handleUpdate(scope.row)">激活</el-button>
            <el-button v-if="scope.row.version==1" type="danger" plain @click="handleUpdate(scope.row)">冻结</el-button>
          </template>
        </el-table-column>
        <el-table-column
          width="360"
          prop="id"
          label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="roBindRole(scope.row)">编辑绑定角色</el-button>
            <el-button size="mini" type="primary" @click="dc(scope.row)">导出DOC</el-button>
            <el-button type="primary" size="mini" @click="updateOpen(scope.row)">修改</el-button>
          </template>

        </el-table-column>
      </el-table>



      <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="sizes"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <el-dialog
        title="为用户绑定角色"
        :visible.sync="dialogVisible"
        width="40%">
        <div style="text-align: left">
          <span>当前用户是：{{userName}}</span>
          <span>&nbsp用户ID是：{{userId}}</span>
        </div>
        <br>
        <div style="text-align: left;">

          <el-select
            style="width: 80%"
            v-model="value"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入角色名称关键字"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>

          <el-button style="margin-left: 20px" type="primary" @click="getSelectedRole">确 定</el-button>
        </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
         </span>

      </el-dialog>

      <el-dialog :visible.sync="dialog1" title="导出数据Excel" width="60%">
        <el-form ref="excleForm" :model="excleForm" label-width="80px">
          <el-form-item label="文件名" prop="excleName">
            <el-input v-model="excleForm.excleName"></el-input>
          </el-form-item>
          <el-form-item label="导出数量" prop="total">
            <el-input v-model="excleForm.total"></el-input>
          </el-form-item>
          <el-form-item label="导出字段" prop="type">
            <el-checkbox-group v-model="excleForm.type">
              <el-checkbox label="u.loginName" name="type">登录名</el-checkbox>
              <el-checkbox label="u.tel" name="type">手机号</el-checkbox>
              <el-checkbox label="GROUP_CONCAT(r.`name`)" name="type">拥有角色</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="排序方式" prop="order">
            <el-radio-group v-model="excleForm.order">
              <el-radio label="asc">升序</el-radio>
              <el-radio label="desc">降序</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="排序字段" prop="orderType">
            <el-checkbox-group v-model="excleForm.orderType">
              <el-checkbox label="u.id" name="type">ID</el-checkbox>
              <el-checkbox label="u.createTime" name="type">创建时间</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="outExcleSubmit">导出</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>





      <!--增加-->
      <el-dialog
        title="提示"
        :visible.sync="opendialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="状态">
            <el-input v-model="form.version"></el-input>
          </el-form-item>
          <el-form-item label="用户名称">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
          <el-form-item label="登录名">
            <el-input v-model="form.loginName"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.passWord"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.tel"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>

            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-upload
              class="avatar-uploader"
              action="http://localhost:10001/user/auth/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>

    <!--修改-->
      <el-dialog
        title="提示"
        :visible.sync="updatedialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form1" :model="form1" label-width="80px">
          <el-form-item label="状态">
            <el-input v-model="form1.version"></el-input>
          </el-form-item>
          <el-form-item label="用户名称">
            <el-input v-model="form1.userName"></el-input>
          </el-form-item>
          <el-form-item label="登录名">
            <el-input v-model="form1.loginName"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form1.passWord"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form1.tel"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form1.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>

            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-upload
              class="avatar-uploader"
              action="http://localhost:10001/user/auth/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitUpdate">立即创建</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "userList",
        data(){
           return{
               dialog1:false,
               current:1,
               total:0,
               size:5,
               sizes:[5,8,10],
               formInline:{},
             dialogVisible: false,
             userList:[],
             userName:"",
             userId:"",
             options: [],
             value: [],
             list: [],
             loading: false,
             states:[],
              form:{},
               opendialogVisible:false,
               imageUrl: '',
               excleForm:{
                   total:'',
                   type:[],
                   order:'',
                   orderType:[],
                   excleName:''
               },
                form1:{},
               updatedialogVisible:false

           }
        },
        created(){
          this.initData();
        },
        methods:{
            onSubmitUpdate(){
                //alert(row.id);
                this.form1.img=this.imageUrl;
                this.$axios.post(this.$gloableData.serverPath+"user/auth/updateUser",this.form1).then((response)=>{
                    if(response){
                        this.initData();
                        this.updatedialogVisible=false;
                        this.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });

                    }else {
                        this.$message.error('错了哦，这是一条错误消息');
                    }
                })
            },
            updateOpen(row){
                this.updatedialogVisible=true;
                this.form1=row;
                this.imageUrl=row.img;

            },
            toExcel(){
                this.dialog1=true;
            },
            //导出Excle
            outExcleSubmit(){
                this.$axios.post("http://localhost:10001/user/auth/toExcel",this.excleForm).then(res=>{
                    if(res.data.code==200){
                        this.initData();
                        this.dialog1 = false;
                        this.$refs['excleForm'].resetFields();
                        this.$message({
                            message: '恭喜你，导出数据成功！！！',
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            message: '警告哦，导出数据失败！！！',
                            type: 'warning'
                        });
                    }
                });
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.form.img=res;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            dc(row){
                this.form=row;
                //alert(JSON.stringify(this.form));
                this.$axios.post(this.$gloableData.serverPath+"user/auth/getDoc",this.form).then((response)=>{
                    if(response){
                        alert("导出成功");
                    }else {
                        alert("导出失败");
                    }
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            addOpen(){
                this.opendialogVisible=true;
            },
            onSubmit() {
                console.log('submit!');
                this.$axios.post(this.$gloableData.serverPath+"user/auth/addUser",this.form).then((response)=>{
                    //alert(response.data.code);
                    if(response.data.code==200){
                        this.initData();
                        this.opendialogVisible=false;
                        this.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });

                    }else {
                        alert(response.data.error);
                    }
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.size=val;
                this.initData();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.current=val;
                this.initData();
            },
            handleUpdate(row){
                //console.log("修改状态:"+JSON.stringify(row));
                JSON.stringify(row);
                this.$axios.post(this.$gloableData.serverPath+"user/auth/getUserUpdate",row).then((response)=>{

                    if(response){
                        this.initData();
                    }
                })
            },
            onSearch() {
                console.log('submit!');
                this.current=1;
                this.initData();
            },
            initData(){
                //console.log("用户名称:"+this.formInline.userName);
                this.$axios.get(this.$gloableData.serverPath+"user/auth/getUserList",{
                    params:{
                        current:this.current,
                        size:this.size,
                        userName:this.formInline.userName,
                        loginName:this.formInline.loginName,
                        tel:this.formInline.tel
                    }
                }).then((response)=>{
                   // console.log("用户获取的列表:==="+response.data.result);
                    //获取数据
                    this.$data.userList=response.data.result.records;
                    this.$data.total=response.data.result.total;
                }).catch((error)=>{

                })
            },
          roBindRole(row){
             this.userName=row.userName;
             this.userId=row.id;
             //打开对话窗
             this.dialogVisible=true
          },
          remoteMethod(query) {
               // alert(query);
            if (query !== '') {
              this.loading = true;
              setTimeout(() => {
                this.$axios.get(this.$gloableData.serverPath+"user/auth/getRoleList",{
                    params:{
                        name:query
                    }
                }).then((response)=>{
                  this.options= response.data.result
                  this.loading = false;
                }).catch((error)=>{
                  this.loading = false;
                })
              }, 200);
            } else {
              this.options = [];
            }
          },
          getSelectedRole(){
                let roleIds=this.value.map(id=>id).join(",");
                //alert(roleIds);
             //给用户绑定角色信息
            this.$axios.get(this.$gloableData.serverPath+"user/auth/bindRoleForUser",
                {params:{userId:this.userId,roleIds:roleIds}}).then((response)=>{
              //获取数据
              if(response.data){
                  this.dialogVisible=false;
                  this.initData();
                this.$message({
                  message: '操作成功！',
                  type: 'success'
                });
                //
                this.value=[];
                this.list=[];
                this.states=[];
                this.options=[];

                //

              }

            }).catch((error)=>{

            })
          }
        },
        activated() {
          /*  this.$axios.post(this.$gloableData.serverPath+"user/auth/getUserList","").then((response)=>{
               //获取数据
               this.$data.userList=response.data.result.list;
            }).catch((error)=>{

            })*/
        }
    }
</script>

<style>
  .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    float: left;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
